<template>
    <section class="lineWrap_0310" @scroll="addscroll">
      <h1>评论({{listDate?total:0}})</h1>
      <ul>
          <li v-for="item in listDate">
              <i :style="{background:'url('+ item.HeadUrl +') no-repeat center'}"></i>
              <div class="font_0307">
                  <span>{{item.Name}}</span>
                  <time>{{transTime(item.CreateTime)}}</time>
                  <p>{{item.Content}}</p>
              </div>
          </li>
      </ul>
    </section>
</template>
<script>
import { fetchOtherGet,HJappid } from '../assets/api';
import hgjSkip from '../assets/js/hgjSkip';
import Client from '../assets/js/common';
import API from '../assets/js/asktoses';
export default {
  props: {
      
  },
  data () {
    return {
        vioce:require('../assets/img/expert/icon_language-max@3x.png'),
        listDate:[],
        arrlist:{

        },
        addlist:true,
        listnum:0,
        total:0,
    }
  },
  created(){
      this.comite()
  },
  methods: {
    addscroll(){
        if(this.addlist){
            this.comite();
        }
    },
    async comite(){
        this.listnum++;
      const res = await fetchOtherGet(API.InfoCommentList,{
        informationDetilId:this.$route.query.informationDetilId,
        type:1,
        pageSize:10,
        pageIndex:this.listnum,
        appId:HJappid,
      });
      if(res.Result){
            this.arrlist = res.Result.rows;
            this.total = res.Result.total;
            if(this.arrlist.length != 10){
                this.addlist = false;
            }
            this.arrlist.forEach(item => {
                this.listDate.push(item)
            });
        }
    },
    transTime(S){
        let T = new Date(S),
            Format = Q => {
                return Q < 10 ? '0' + Q : Q
            },
            result = Format(T.getUTCHours()) + ':' + Format(T.getMinutes()),
            month = T.getMonth() + 1,
            days = T.getDate();
            result = Format(month) + '-' + Format(days) + ' ' + result
        return result
    },
  }
}

</script>
<style lang="less">
  .lineWrap_0310 {
      width: 100%;
      background: #fff;
      height: 100%;
      overflow: scroll;
      position: fixed;
      padding: 0 0.15rem;
      box-sizing: border-box;
      top: 0;
      left: 0;
      z-index: 555;
      h1{
          font-size: 0.14rem;
          color: #333;
          line-height: 3;
          margin-bottom: 0.05rem;
      }
      ul{
          width: 100%;
          li{
              padding: 0.025rem 0 0 0.05rem;
              &:after{
                  content: "";
                  display: block;
                  clear: both;
              }
              i{
                  display: inline-block;
                  height: 0.4rem;
                  width: .4rem;
                  background-size: cover !important;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: 0.07rem;
                  float: left;
              }
              .font_0307{
                    border-bottom: 1px solid #ddd;
                    padding: .1rem 0 .1rem;
                    position: relative;
                    display: inline-block;
                    width: 2.9rem;
                    span{
                        font-size: 0.16rem;
                        color: #333;
                    }
                    time{
                        position: absolute;
                        top: .1rem;
                        right: 0;
                        font-size: .14rem;
                        color: #B3B3B6;
                    }
                    p {
                        font-size: 0.14rem;
                        color: #B3B3B6;
                        line-height: 1.5;
                        margin-top: 0.07rem;
                    }   
              }
                
          }
      }
  }
</style>
